<template>
  <div>
    <header>2019级新生宿舍情况表</header>
    <tab active-color="#37aefc"
         bar-active-color="#37aefc">
      <tab-item @on-item-click="$router.push('/admin/reportChart')"
                class="tab-item">报到情况</tab-item>
      <tab-item class="tab-item"
                @on-item-click="$router.push('/admin/dormInfo')"
                selected>宿舍情况</tab-item>
    </tab>
    <p class="time">截至统计时间：{{nowTime}}</p>
    <flexbox>
      <flexbox-item>
        <div class="flex-box">共{{allbed}}床铺</div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-box">已住{{arrive}}床铺</div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-box">剩余{{left}}床铺</div>
      </flexbox-item>
    </flexbox>
    <x-table full-bordered
             ref="table"
             style="background-color:#fff;">
      <thead>
        <tr>
          <th>院系</th>
          <th>宿舍数</th>
          <th>已满间</th>
          <th>未满间</th>
          <th>空房间</th>
        </tr>
      </thead>
      <tbody v-for="(row,index) in data"
             :key="index"
             ref="academy"
             id="acadlist">
        <tr @click="show(index)"
            style="cursor: pointer;">
          <td>{{row.academy}}
          </td>
          <td>{{row.dormitory_count}}</td>
          <td>{{row.full_dormitory}}</td>
          <td>{{row.not_full_dormitory}}</td>
          <td>{{row.empty_dormitory}}</td>
        </tr>
      </tbody>
    </x-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nowTime: "2019-08-05 14:00:05",
      details: false,
      data: [],
      allbed: 0,
      arrive: 0,
      left: 0,
      nowOpen: 0
    };
  },
  mounted() {
    let _this = this;
    _this.axios.get("/user/getDormitoryAll").then(resp => {
      let data = resp.data;
      for (var i in data) {
        _this.data.push(data[i]);
        _this.allbed = data[0].bed_number;
        _this.arrive = data[0].arrive_num;
        _this.left = data[0].surplus_bed;
      }
    });
  },
  updated() {},
  methods: {
    createNodeByIndex(index) {
      let _tbody = this.$refs.academy[index]; //获取整个表格数据
      let nodeTr = [];
      let nodeTd = [];
      let nodeText = [];
      let nodeHead = document.createElement("tr");
      let title = ["宿舍类型", "楼号", "房间号", "床铺数", "已住"];
      for (let v = 0; v < title.length; v++) {
        nodeTd[v] = document.createElement("th");
        nodeText[v] = document.createTextNode(title[v]);
        nodeTd[v].style.backgroundColor = "#f0f0f0";
        nodeTd[v].appendChild(nodeText[v]);
        nodeHead.appendChild(nodeTd[v]);
      }
      _tbody.appendChild(nodeHead);
      for (let i = 0; i < this.data[index].dormitory.length; i++) {
        nodeTr[i] = document.createElement("tr");
        nodeText[0] = document.createTextNode(
          this.data[index].dormitory[i].sex
        );
        nodeText[1] = document.createTextNode(
          this.data[index].dormitory[i].dormitory_num
        );
        nodeText[2] = document.createTextNode(
          this.data[index].dormitory[i].house_num
        );
        nodeText[3] = document.createTextNode(
          this.data[index].dormitory[i].size
        );
        nodeText[4] = document.createTextNode(
          this.data[index].dormitory[i].arrive_num
        );
        for (let j = 0; j < 5; j++) {
          nodeTd[j] = document.createElement("td");
          nodeTd[j].style.backgroundColor = "#f0f0f0";
          nodeTd[j].appendChild(nodeText[j]);
          nodeTr[i].appendChild(nodeTd[j]);
        }
        _tbody.appendChild(nodeTr[i]);
      }
    },
    show(index) {
      if (index != 0) {
        let _tbody = this.$refs.academy[index]; //获取整个表格数据
        let trs = _tbody.getElementsByTagName("tr");
        if (index == this.nowOpen) {
          for (let i = 1; i < trs.length; i++) {
            trs[i].style.display = "none";
          }
          this.nowOpen = 0;
        } else {
          let last_tbody = this.$refs.academy[this.nowOpen]; //获取整个表格数据
          let lasttrs = last_tbody.getElementsByTagName("tr");
          for (let i = 1; i < lasttrs.length; i++) {
            lasttrs[i].style.display = "none";
          }
          if (trs.length <= 1) {
            this.details = true;
            this.createNodeByIndex(index);
          } else {
            for (let i = 1; i < trs.length; i++) {
              trs[i].style.display = "table-row";
            }
            this.details = !this.details;
          }
          this.nowOpen = index;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}
.time {
  letter-spacing: 1px;
  font-size: 12px;
  text-align: center;
  margin: 15px 0;
  color: rgba(102, 102, 102, 1);
}
.flex-box {
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
}
// vux.class.vux-flexbox
.vux-flexbox {
  text-align: center;
}
.tab-item {
  cursor: pointer;
  font-size: 16px !important;
  letter-spacing: 1px;
}
.vux-table td,
.vux-table th {
  table-layout: fixed;
  word-wrap: break-word;
}
</style>

 
